<template>
  <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="搜索学员:">
              <a-input
                v-model="keywords"
                placeholder="请输入学员姓名/手机号(回车搜索)"
                @pressEnter="clickName"
                style="width: 80%"
              >
                <a-tooltip slot="suffix" title="请输入学员姓名/手机号">
                  <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="clickName" />
                </a-tooltip>
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="报读课程:">
              <a-select v-model="queryParam.course_id" placeholder="请选择课程" allowClear style="width: 80%">
                <a-select-option v-for="(item, index) in courseList" :key="index" :value="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="结课状态:">
              <a-select placeholder="请选择结课状态" allowClear style="width: 80%" v-model="queryParam.is_ending">
                <a-select-option :value="2">未结课</a-select-option>
                <a-select-option :value="1">已结课</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="8" :sm="24">
              <a-form-item label="所在班级:">
                <a-select v-model="queryParam.class_id" placeholder="请选择班级" allowClear style="width: 80%">
                  <a-select-option v-for="(item, index) in classList" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="班级老师:">
                <a-select v-model="queryParam.teacher_id" placeholder="请选择老师" allowClear style="width: 80%">
                  <a-select-option v-for="(item, index) in teacherList" :key="index" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24" style="position: relative">
              <a-form-item label="剩余数量:">
                <a-input
                  placeholder="请选择剩余数量"
                  :value="surplusNumber"
                  style="width: 80%"
                  readonly
                  @click="isShowSurplus = true"
                />
              </a-form-item>
              <div class="surplus-number" v-if="isShowSurplus">
                <div class="title-box">
                  <div>
                    <div style="margin-bottom: 12px">最小值:</div>
                    <a-input-number v-model="min_surplus" :min="0" />
                    <span style="padding: 0 5px">~ </span>
                  </div>

                  <div>
                    <div style="margin-bottom: 12px">最大值:</div>
                    <a-input-number v-model="max_surplus" />
                  </div>
                </div>
                <div class="foot">
                  <a-button @click="isShowSurplus = false">取消</a-button>
                  <a-button @click="surplusSure">确定</a-button>
                </div>
              </div>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="到期日期:">
                <a-range-picker @change="expireChange" />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="是否停课:">
                <a-checkbox @change="endClassChange"> 停课中 </a-checkbox>
              </a-form-item>
            </a-col> -->
            <a-col :md="8" :sm="24">
              <a-form-item label="是否超上:">
                <a-checkbox @change="superChange"> 有超上 </a-checkbox>
              </a-form-item>
            </a-col>
          </template>
        </a-row>
      </a-form>
    </div>
    <a style="cursor: pointer" v-if="advanced" @click="advanced = !advanced" id="moreButton">
      收起
      <a-icon type="up"></a-icon>
    </a>
    <a style="cursor: pointer" v-if="!advanced" @click="advanced = !advanced" id="moreButton">
      展开
      <a-icon type="down"></a-icon>
    </a>
    <div>
      <div style="display: flex">
        <template v-if="selectedRowKeys.length != 0">
          <div class="selected-data-box">
            <a-icon type="exclamation-circle" theme="filled" style="color: #ff8534" />
            <span style="margin-left: 10px; margin-right: 20px">已选择{{ selectedRowKeys.length }}项</span>
            <a @click="clear">清空</a>
          </div>
          <a-button class="mr8" @click="manyEndClass">批量结课</a-button>
        </template>
        <template v-else>
          <a-button class="mr8" @click="studentVisible = true">导入报读信息</a-button>
          <a-button class="mr8" @click="exportFile">导 出</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item key="/educationalCenter/studentExpand/changeImportHour">
                <router-link :to="{ name: 'change_import_hour' }"> 修正剩余课时</router-link>
              </a-menu-item>
              <a-menu-item key="/educationalCenter/studentExpand/batchClearCourseHour">
                <router-link :to="{ name: 'batch_clear_course_hour' }"> 批量课时清零</router-link>
              </a-menu-item>
              <a-menu-item key="3" @click="manyEndClass"> 批量结课 </a-menu-item>
            </a-menu>
            <a-button> 更多操作 <a-icon type="down" /> </a-button>
          </a-dropdown>
        </template>
      </div>
    </div>
    <div class="mt12">
      <a-alert type="success" style="border: none; border-radius: 5px; background: #fff0e7; padding: 4px 12px">
        <span slot="description">
          剩余课时数(课时)：
          <span style="margin-right: 10px; font-weight: bolder">{{ statistics.count_surplus_class_hour }}</span>
          剩余课消金额(元)：<span style="font-weight: bolder; margin-right: 8px">{{
            statistics.sum_surplus_class_consume
          }}</span>
          <a-tooltip>
            <template slot="title"> 包括未消耗的课时和时长 </template>
            <a-icon type="question-circle" theme="filled" style="color: #ff8534" />
          </a-tooltip>
        </span>
      </a-alert>
    </div>
    <div class="mt12">
      <s-table
        ref="table"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        showPagination="auto"
        class="user_management_table"
        :scroll="{ x: 1300 }"
        :pagination="pagination"
      >
        <div slot="student_name" slot-scope="text, record">
          <a @click="goStudentInfo(record)">{{ record.student_name }}</a>
        </div>
        <!-- 购买数量 -->
        <div slot="buyNumber" slot-scope="text, record">
          <!-- <span v-if="record.price_type==1"> -->
          {{ record.price_type == 1 ? record.buy_ksnum + '课时' : record.buy_daynum + '天' }}
          <!-- </span> -->
        </div>
        <!-- 赠送数量 -->
        <div slot="giveNumber" slot-scope="text, record">
          {{ record.price_type == 1 ? record.give_ksnum + '课时' : record.give_daynum + '天' }}
        </div>
        <!-- 已消耗数量 -->
        <div slot="consumeNumber" slot-scope="text, record">
          <!-- 课时 -->
          <span v-if="record.price_type == 1">
            {{ Number(record.buy_ksnum) + Number(record.give_ksnum) - record.ksnum }}课时
          </span>
          <span v-else>{{ Number(record.buy_daynum) + Number(record.give_daynum) - record.daynum }}天</span>
        </div>
        <!-- 退转数量 -->
        <div slot="returnNumber" slot-scope="text, record">
          {{ record.price_type == 1 ? record.ks_refund_num + '课时' : record.day_refund_num + '天' }}
        </div>
        <!-- 剩余数量 -->
        <div slot="remainNumber" slot-scope="text, record">
          <div>{{ record.price_type == 1 ? record.ksnum + '课时' : record.daynum + '天' }}</div>
          <div></div>
        </div>
        <span slot="consume_price" slot-scope="text, record"> ￥{{ record.consume_price }} </span>
        <span slot="surplus_price" slot-scope="text, record"> ￥{{ record.surplus_price }} </span>
        <!-- 到期日期 -->
        <span slot="buy_end_time" slot-scope="text, record">
          <span v-if="record.buy_end_time == 0">-</span>
          <span v-else-if="record.buy_end_time && record.buy_end_time != 0">{{ record.buy_end_time }}</span>
          <span v-else>-</span>
        </span>
        <div slot="miss_class_num" slot-scope="text, record">
          {{ record.miss_class_num || '-' }}
        </div>
        <div slot="user_name" slot-scope="text, record">
          {{ record.user_name || '-' }}
        </div>
        <div slot="academic_supervisor_name" slot-scope="text, record">
          {{ record.academic_supervisor_name || '-' }}
        </div>
      </s-table>
    </div>
    <a-modal
      title="导入学员信息"
      :visible="studentVisible"
      @cancel="studentVisible = false"
      :footer="null"
      :width="560"
    >
      <div class="mb16">
        <!-- <a-radio-group>
          <a-radio-button :value="1">
              <div>123</div>
              <div>456</div>
          </a-radio-button>
        </a-radio-group> -->

        <div class="mb16 hd-box" style="display: flex">
          <div
            class="import-hd"
            :class="{ 'active-import-hd': index == showIndex, mr4: index == 0 }"
            v-for="(item, index) in importInfo"
            :key="index"
            @click="importHeadClick(index)"
          >
            <div style="font-weight: 500; color: #333; margin-bottom: 4px">{{ item.title }}</div>
            <div style="font-size: 12px; color: #999">{{ item.des }}</div>
          </div>
        </div>
        <div v-if="showIndex == 0">
          <div class="mb16">
            <h4 class="mb4">1.下载导入模板，按要求填写信息</h4>
            <div>
              <a @click="downloadStudent">下载学员信息导入模板</a>
            </div>
          </div>
          <div class="mb16">
            <h4 class="mb4">2.选择需要导入的Excel文件</h4>
            <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
              <a-button type="primary" :disabled="fileList.length > 0">添加文件</a-button>
            </a-upload>
          </div>
          <!-- <div class="mb16">
            <div class="mb4">3.选择数据重复时的操作方式</div>
            <div class="color-grey mb8">数据重复判定规则：学员姓名和手机号与系统内已有的学员都相同，则为重复数据</div>
            <div>
              <a-radio-group v-model="dataType">
                <a-radio :value="1"> 继续导入，并覆盖原信息 </a-radio>
                <a-radio :value="2"> 终止导入，修改后重新上传 </a-radio>
              </a-radio-group>
            </div>
          </div> -->
          <div class="mb16">
            <h4 class="mb4">3.添加备注</h4>
            <div class="mb4">
              <a-input style="width: 280px" placeholder="最多20字（选填）" v-model="excelInRemarks" />
            </div>
            <div class="color-grey">为导入的文件添加备注，便于在导入记录中查找</div>
          </div>
        </div>
        <!-- 导入学员报读信息 -->
        <div v-if="showIndex == 1">
          <div class="mb16">
            <h4>1.选择导入类型</h4>
            <div class="tip-box">
              <div class="mb4">温馨提示：</div>
              <div style="font-size: 12px">
                • 导入合同前请先在系统中录入课程；每次导入前请根据合同类型下载最新的导入模板。
              </div>
            </div>
            <div>
              <a-radio-group v-model="moneyType">
                <a-radio :value="1"> 按课时收费合同 </a-radio>
                <a-radio :value="2"> 按天收费合同 </a-radio>
              </a-radio-group>
              <div style="margin-top: 8px" :class="{ 'second-type': moneyType == 2 }">
                <a @click="enrollDownload">下载导入模板</a>
              </div>
            </div>
          </div>
          <div class="mb16">
            <h4 class="mb4">2.选择需要导入的Excel文件</h4>
            <a-upload :file-list="fileList1" :remove="handleRemove1" :before-upload="beforeUpload1">
              <a-button type="primary" :disabled="fileList1.length > 0">添加文件</a-button>
            </a-upload>
          </div>
          <div class="mb16">
            <h4 class="mb4">3.添加备注</h4>
            <div class="mb4">
              <a-input style="width: 280px" placeholder="最多20字（选填）" v-model="excelInRemarks" />
            </div>
            <div class="color-grey">为导入的文件添加备注，便于在导入记录中查找</div>
          </div>
        </div>

        <div class="import-foot">
          <a-button type="primary" style="padding: 0 60px" @click="startImport"> 开始导入 </a-button>
        </div>
      </div>
    </a-modal>
    <a-modal
      title="结课提醒"
      :visible="endClassVisible"
      :confirm-loading="endClassConfirmLoading"
      @ok="handleOk"
      @cancel="endCancel"
      :width="680"
      class=""
    >
      <div class="top-box">
        <div>
          你正在对 <a>{{ selectedRows.length }}</a
          >个报读课程进行结课操作，结课后，系统将对学员及学员该课程进行如下处理，请仔细阅读并确认。
        </div>
        <div>1、学员在该课程下的 <a>剩余课时将全部清零</a> ；</div>
        <div>
          2、学员将被 <a>移出对应班级</a> ，且已结课的课程不能参与后续教学流程（如点名、分班、排课、续费预警等）；
        </div>
        <div>3、相关 <a>点名记录、缺课记录、退转课记录</a> 将被锁定；</div>
        <div>4、学员在该课程下如有超上的课时，将作忽略处理；</div>
      </div>
      <div class="table-box" v-if="endClassData.length > 0">
        <a-table
          :columns="endcolumns"
          :data-source="endClassData"
          :pagination="false"
          class="user_management_table"
          style="border: 1px solid #e8e8e8"
          :scroll="{ y: 300 }"
        >
          <span slot="end_class_number" slot-scope="text, record">
            {{ record.price_type == 1 ? record.ksnum + '课时' : record.daynum + '天' }}
          </span>
        </a-table>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import {
  signUpList,
  studentdownload,
  excelIn,
  downloadClassHourImport,
  downloadClassDayImport,
  classHourImport,
  classDayImport,
  enrollStatistics,
  batchEndClass,
  reportExport,
} from '@/api/student'
import { coursesList } from '@/api/courseCharge'
import { classList } from '@/api/class'
import { teacherList } from '@/api/teacher'
import { STable, Ellipsis } from '@/components'
export default {
  name: 'StudentSignInfoList',
  components: {
    STable,
    Ellipsis,
  },
  data() {
    return {
      endClassVisible: false,
      endClassConfirmLoading: false,
      endcolumns: [
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          width: 200,
          // fixed: 'left',
          // scopedSlots: { customRender: 'student_name' }
        },
        {
          title: '报读课程',
          dataIndex: 'course_name',
          width: 200,
        },
        {
          title: '剩余数量',
          dataIndex: 'end_class_number',
          width: 200,
          // fixed: 'left',
          scopedSlots: { customRender: 'end_class_number' },
        },
      ],
      surplusNumber: '',
      min_surplus: null,
      max_surplus: null,
      isShowSurplus: false,
      statistics: {}, // 统计
      // 导入学员弹窗
      studentVisible: false,
      importInfo: [
        {
          title: '导入学员基本信息',
          des: '可导入学员的姓名/性别/出生日期/年龄/就读学校/年级/家庭住址等基本信息',
        },
        {
          title: '导入学员报读信息',
          des: '可导入学员的购买课程/课时数/金额/时间等报读信息，导入后可进行分班排课',
        },
      ],
      dataType: 1,
      moneyType: 1,
      showIndex: 1,
      fileList: [],
      fileList1: [],
      excelInRemarks: '', // 备注
      advanced: false, // 展开 收齐
      // 查询参数
      keywords: '',
      courseList: [],
      classList: [],
      teacherList: [],
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      queryParam: {
        school_id: this.$store.state.user.school,
        is_ending: 2,
      },
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          width: 200,
          fixed: 'left',
          scopedSlots: { customRender: 'student_name' },
        },
        {
          title: '手机号',
          dataIndex: 'main_phone',
          width: 200,
          fixed: 'left',
          //   scopedSlots: { customRender: 'name' },
        },
        {
          title: '报读课程',
          dataIndex: 'course_name',
          width: 200,
          //   scopedSlots: { customRender: 'name' },
        },
        {
          title: '购买数量',
          //   dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'buyNumber' },
        },
        {
          title: '赠送数量',
          //   dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'giveNumber' },
        },
        {
          title: '已消耗数量',
          //   dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'consumeNumber' },
        },
        {
          title: '退转数量',
          //   dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'returnNumber' },
        },
        {
          title: '剩余数量',
          //   dataIndex: 'name',
          width: 200,
          scopedSlots: { customRender: 'remainNumber' },
        },
        {
          title: '课消金额',
          // dataIndex: 'consume_price',
          width: 200,
          scopedSlots: { customRender: 'consume_price' },
        },
        {
          title: '剩余课消金额',
          dataIndex: 'surplus_price',
          width: 200,
          scopedSlots: { customRender: 'surplus_price' },
        },
        {
          title: '到期日期',
          // dataIndex: 'buy_end_time',
          width: 200,
          scopedSlots: { customRender: 'buy_end_time' },
        },
        {
          title: '缺课次数',
          // dataIndex: 'miss_class_num',
          width: 200,
          scopedSlots: { customRender: 'miss_class_num' },
        },
        {
          title: '跟进人',
          // dataIndex: 'user_name',
          width: 200,
          scopedSlots: { customRender: 'user_name' },
        },
        {
          title: '学管师',
          // dataIndex: 'academic_supervisor_name',
          width: 200,
          scopedSlots: { customRender: 'academic_supervisor_name' },
        },
      ],

      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return signUpList(
          Object.assign(parameter, this.queryParam, {
            keywords: this.keywords,
            group_min_surplus: this.min_surplus,
            group_max_surplus: this.max_surplus,
          })
        ).then((res) => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      rowSelection: {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      },
      endClassData: [],
    }
  },
  created() {
    this.getCourseList()
    this.getClassList()
    this.getTeacherList()
    this.sumNumber()
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh(true)
        this.sumNumber()
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true, // 开启深度监听，默认是false
    },
  },
  methods: {
    clickName() {
      this.$refs.table.refresh(true)
      this.sumNumber()
    },
    surplusSure() {
      if (this.min_surplus == null || this.max_surplus == null) {
        this.$message.warning('请输入最大值或者最小值')
        this.min_surplus = ''
        this.max_surplus = ''
        this.surplusNumber = ''
        this.isShowSurplus = false
        return
      }
      if (this.min_surplus > this.max_surplus) {
        this.$message.warning('最小值不能大于最大值')
      } else {
        this.$refs.table.refresh(true)
        this.sumNumber()
        this.surplusNumber = this.min_surplus + '~' + this.max_surplus
        this.isShowSurplus = false
      }
    },
    // 导出
    exportFile() {
      reportExport(
        Object.assign(this.queryParam, {
          keywords: this.keywords,
          group_min_surplus: this.min_surplus,
          group_max_surplus: this.max_surplus,
        })
      )
        .then((res) => {
          window.location.href = res.url.url + res.url.path
          this.$message.success('导出成功')
        })
        .catch((error) => {
          this.$message.error(err.data.message || '导出失败，请稍后重试')
        })
    },
    // 统计
    sumNumber() {
      enrollStatistics(
        Object.assign(this.queryParam, {
          keywords: this.keywords,
          group_min_surplus: this.min_surplus,
          group_max_surplus: this.max_surplus,
        })
      )
        .then((res) => {
          this.statistics = res
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取课程列表失败，请稍后重试')
        })
    },
    // 获取课程
    getCourseList() {
      coursesList({ school_id: this.queryParam.school_id, pageSize: 999999 })
        .then((res) => {
          this.courseList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取课程列表失败，请稍后重试')
        })
    },
    // 获取班级
    getClassList() {
      classList({ school_id: this.queryParam.school_id, pageSize: 999999 })
        .then((res) => {
          this.classList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取班级列表失败，请稍后重试')
        })
    },

    // 获取老师
    getTeacherList() {
      teacherList({ school_id: this.queryParam.school_id, pageSize: 999999 })
        .then((res) => {
          this.teacherList = res.data
        })
        .catch((error) => {
          this.$message.error(err.data.message || '获取老师列表失败，请稍后重试')
        })
    },
    // 到期日期
    expireChange(date, dateString) {
      this.queryParam.start_buy_end_time = dateString[0]
      this.queryParam.end_buy_end_time = dateString[1]
      this.$refs.table.refresh(true)
      this.sumNumber()
    },
    endClassChange(e) {},
    superChange(e) {
      console.log(e)
      if (e.target.checked) {
        this.queryParam.is_exceed = 1
        this.sumNumber()
        this.$refs.table.refresh(true)
      } else {
        this.queryParam.is_exceed = undefined
        this.sumNumber()
        this.$refs.table.refresh(true)
      }
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    clear() {
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    handleOk() {
      const params = []
      this.endClassConfirmLoading=true
      this.selectedRows.forEach((item) => {
        params.push({
          student_id: item.student_id,
          course_id: item.project_id,
          structures_id: item.structures_id,
        })
      })
      batchEndClass({ data: params })
        .then((res) => {
          this.selectedRowKeys = []
          this.selectedRows = []
          this.$refs.table.refresh(true)
          
        })
        .catch((err) => {
          this.$message.error(err.data.message || '批量结课失败')
        }).finally(()=>{
          this.endClassVisible = false
          this.endClassConfirmLoading=false
        })
    },
    endCancel() {
      this.endClassVisible = false
      this.selectedRowKeys = []
      this.selectedRows = []
    },
    // 批量结课
    manyEndClass() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.warning('请选择要结课的学员')
      } else {
        const copyData = []
        // {{ record.price_type == 1 ? record.ksnum + '课时' : record.daynum + '天' }}
        this.selectedRows.forEach((item) => {
          if (item.price_type == 1 && item.ksnum != 0) {
            copyData.push(item)
          }
          if (item.price_type == 2 && item.daynum != 0) {
            copyData.push(item)
          }
        })
        console.log(copyData)
        this.endClassData = copyData
        this.endClassVisible = true
      }
    },
    // 导入学员信息
    importHeadClick(index) {
      this.showIndex = index
    },
    // 下载学员信息导入模板
    downloadStudent() {
      studentdownload({ school_id: this.$store.state.user.school })
        .then((res) => {
          if (res) {
            let url = ''
            url = res.url.url + res.url.path
            window.location.href = url
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '下载导入失败')
        })
    },
    // 下载课时导入
    enrollDownload() {
      if (this.moneyType == 1) {
        downloadClassHourImport({ school_id: this.$store.state.user.school })
          .then((res) => {
            if (res) {
              let url = ''
              url = res.url.url + res.url.path
              window.location.href = url
            }
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载导入失败')
          })
      }
      if (this.moneyType == 2) {
        downloadClassDayImport({ school_id: this.$store.state.user.school })
          .then((res) => {
            if (res) {
              let url = ''
              url = res.url.url + res.url.path
              window.location.href = url
            }
          })
          .catch((err) => {
            this.$message.error(err.data.message || '下载导入失败')
          })
      }
    },
    // 添加文件
    beforeUpload(file) {
      this.fileList = [file]
      const extension = file.name.split('.')[1] === 'xls'

      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList = []
        return false
      }
      return false
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()

      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload1(file) {
      this.fileList1 = [file]
      const extension = file.name.split('.')[1] === 'xls'

      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList1 = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList1 = []
        return false
      }
      return false
    },
    handleRemove1(file) {
      const index = this.fileList1.indexOf(file)
      const newFileList = this.fileList1.slice()

      newFileList.splice(index, 1)
      this.fileList1 = newFileList
    },
    startImport() {
      if (this.showIndex == 0) {
        if (this.fileList.length < 1) {
          this.$message.error('请选择上传文件')
          return
        }
        // this.updateLoading = true
        const that = this
        const formData = new FormData()
        formData.append('excel', that.fileList[0])
        formData.append('school_id', this.$store.state.user.school)
        formData.append('remark', this.excelInRemarks)
        excelIn(formData)
          .then((res) => {
            this.$refs.table.refresh()
            this.$message.success('导入成功')
          })
          .catch((err) => {
            this.$message.error(err.data.message || '导入失败')
          })
      }
      if (this.showIndex == 1) {
        if (this.fileList1.length < 1) {
          this.$message.error('请选择上传文件')
          return
        }
        const that = this
        const formData = new FormData()
        formData.append('excel', that.fileList1[0])
        formData.append('school_id', this.$store.state.user.school)
        formData.append('remark', this.excelInRemarks)
        // 按课时导入
        if (this.moneyType == 1) {
          classHourImport(formData)
            .then((res) => {
              this.$refs.table.refresh()
              this.$message.success('导入成功')
            })
            .catch((err) => {
              this.$message.error(err.data.message || '导入失败')
            })
        }
        // 按天导入
        if (this.moneyType == 2) {
          classDayImport(formData)
            .then((res) => {
              this.$refs.table.refresh()
              this.$message.success('导入成功')
            })
            .catch((err) => {
              this.$message.error(err.data.message || '导入失败')
            })
        }
      }
      this.studentVisible = false
    },
    goStudentInfo(data) {
      this.$router.push({
        name: 'student_Info',
        query: {
          id: data.student_id,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
#moreButton {
  position: absolute;
  top: 24px;
  right: 20px;
}
.mb4 {
  margin-bottom: 4px;
}
.mr4 {
  margin-right: 4px;
}
.mr8 {
  margin-right: 8px;
}
.mb8 {
  margin-bottom: 8px;
}
.mt12 {
  margin-top: 12px;
}
.mb16 {
  margin-bottom: 16px;
}

.import-hd {
  display: inline-block;
  width: 100%;
  height: 74px;
  padding: 4px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  cursor: pointer;
}
.active-import-hd {
  border: 1px solid #fc9c6b;
  background: hsla(20, 96%, 70%, 0.05);
}
.color-grey {
  color: #999;
  font-size: 12px;
}
.import-foot {
  display: flex;
  justify-content: center;
}
.tip-box {
  border: 1px dashed #e8e8e8;
  padding: 8px;
  margin-bottom: 10px;
}
.second-type {
  margin-left: 140px;
}
.surplus-number {
  width: 250px;
  height: 176px;
  background: #fff;
  position: absolute;
  top: 35px;
  left: 102px;
  z-index: 99;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  .title-box {
    padding: 20px;
    display: flex;
    height: 125px;
    box-sizing: border-box;
  }
  .foot {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px 0 20px;
    border-top: 1px solid #e8e8e8;
  }
}
.selected-data-box {
  min-width: 160px;
  background: #fff0e7;
  padding: 0 12px;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
  margin-right: 10px;
}
.top-box {
  padding: 6px 16px 6px 12px;
  margin-bottom: 16px;
  // display: flex;
  // justify-content: space-between;
  background: rgb(255, 240, 231);
}
</style>
